﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="header">
  <div class="sysName">
    <h1 class="tit">售货机大数据分析平台</h1>
  </div>
  <div class="menu">
    <ul>
      <li class="on"><a href="total.html">总数据</a></li>
      <li><a href="sale.html">销售分析</a></li>
      <li class="sysnameN"></li>
      <li><a href="inventory.html">库存分析</a></li>
      <li><a href="user.html">用户分析</a></li>
    </ul>
  </div>
</div>
<div class="chartWarp toalWarp">
  <div class="pure-g toal-row1"> 
    <!-- 销售金额（元）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">销售金额（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleM" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">销售金额环比增长率</div>
          <div class="subNum">-1.4%</div>
        </div>
      </div>
    </div>
    <!-- 订单量（个）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">订单量（个）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="orderQ" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">订单量环比增长率</div>
          <div class="subNum">11.1%</div>
        </div>
      </div>
    </div>
    <!-- 毛利（元）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">毛利润（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="grossM" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">毛利润环比增长率</div>
          <div class="subNum">3.6%</div>
        </div>
      </div>
    </div>
    <!-- 售货机数量（台）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">售货机数量（台）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="discount" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">售货机数量环比增长率</div>
          <div class="subNum">2.99%</div>
        </div>
      </div>
    </div>
    <!-- 购买用户数（人）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">购买用户数（人）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="unitP" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">购买用户数环比增长率</div>
          <div class="subNum">1.77%</div>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-g toal-row2">
    <div class="pure-u-1-1">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">销售金额变化趋势</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleRate" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-g toal-row3">
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品销售金额前5名</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleMtop5" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">售货机销售情况</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleOrder" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户支付方式占比</h2>
          </div>
        </div>
        <div class="bd">
          <div id="payWay" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script language="javascript" type="text/javascript" src="js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript" src="js/charts.total.js"></script>
</html>